<%--
  Created by IntelliJ IDEA.
  User: jimmyhsu
  Date: 2016/12/23
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link href="../../static/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
        }
        label {
            font-size: 16px;
        }
    </style>
    <%
        String type = request.getParameter("wrong");
    %>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#" style="color: #1abc9c;">青马班</a>
        <ul class="nav">
            <li><a href="signIn.jsp">签到</a></li>
            <li><a href="selectCourse.jsp">课程</a></li>
            <li><a href="comment.jsp">评价</a></li>
        </ul>
    </div>
</div>
<div style="text-align: center;">
<form id="form" class="form-signin" method="post" action="../../changePassword">
    <div class="control-group">

        <div class="controls">
            <label class="control-label pull-left" for="inputOldPwd">原密码 </label>
            <input type="password" id="inputOldPwd" name="inputOldPwd" placeholder="old password">
            &nbsp;
            <%if (!StringUtils.isEmpty(type)) {%>
            <p id="prompt_old_pwd" style="color: #ff0000;">密码错误</p>
            <%}%>
            <p id="prompt_empty_old_pwd" style="color: #ff0000;display: none;">请填写原密码</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label pull-left" for="inputPassword">新密码 </label>
        <div class="controls">
            <input type="password" id="inputPassword" name="inputPassword" placeholder="new password">
            &nbsp;<p id="prompt_empty_pwd" style="color: #ff0000;display: none;">请填写新密码</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label pull-left" for="inputNewPassword">请确认 </label>
        <div class="controls">
            <input type="password" id="inputNewPassword" name="inputNewPassword" placeholder="confirm password">
            &nbsp;<p id="prompt_confirm_fail" style="color: #ff0000;display: none;">两次输入不匹配</p>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="button" class="btn btn-primary" id="changePassword">修改</button>
        </div>
    </div>
</form>
</div>
<%@include file="footer.jsp"%>
<script src="../../static/js/jquery-1.10.2.js"></script>
<script src="../../static/js/bootstrap.js"></script>
</body>
<script type="text/javascript">
    var inputPassword = $('#inputPassword');
    var prompt_empty_old_pwd = $('#prompt_empty_old_pwd');
    var prompt_empty_pwd = $('#prompt_empty_pwd');
    var prompt_confirm_fail = $('#prompt_confirm_fail');
    $('#changePassword').click(function () {
        clearPrompts();
        if ($('#inputOldPwd').val()=='') {
            prompt_empty_old_pwd.css('display','block');
        } else if (inputPassword.val() == ''){
            prompt_empty_pwd.css('display','block');
        } else if (inputPassword.val() != $('#inputNewPassword').val()) {
            prompt_confirm_fail.css('display','block');
        } else {
            $('#form').submit();
        }
    });
    function clearPrompts() {
        prompt_empty_old_pwd.css('display', 'none');
        prompt_empty_pwd.css('display', 'none');
        prompt_confirm_fail.css('display', 'none');
    }
</script>
</html>
